<template>
  <a-modal
      :open="visible"
      title="高级查询条件"
      @ok="handleOk"
      @cancel="handleCancel"
  >
    <template #content>
      <div class="query-modal-content">
        <!-- 左侧字段树 -->
        <div class="left-tree">
          <a-tree
              :tree-data="treeData"
              @select="onTreeSelect"
              :default-expand-all="true"
          />
        </div>
        <!-- 右侧查询条件列表 -->
        <div class="right-conditions">
          <div v-for="(condition, index) in queryConditions" :key="index" class="condition-item">
            <span>{{ condition.fieldName }}</span>
            <a-select v-model:value="condition.operator" style="width: 120px">
              <a-select-option v-for="operator in operators" :key="operator" :value="operator">
                {{ operator }}
              </a-select-option>
            </a-select>
            <a-input v-model:value="condition.value" style="width: 120px" />
            <a-button icon="close" @click="removeCondition(index)" />
          </div>
        </div>
      </div>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import type { TreeDataItem } from 'ant-design-vue/es/tree';

const { visible } = defineProps<{
  visible: boolean;
}>();

const emits = defineEmits(['ok', 'cancel']);

const treeData: TreeDataItem[] = [
  {
    title: '基本信息',
    key: 'basicInfo',
    children: [
      { title: '姓名', key: 'name' },
      { title: '年龄', key: 'age' },
    ],
  },
  {
    title: '联系方式',
    key: 'contactInfo',
    children: [
      { title: '手机号', key: 'phone' },
      { title: '邮箱', key: 'email' },
    ],
  },
];

const operators = ['等于', '大于', '小于', '大于等于', '小于等于', '包含', '不包含'];

const queryConditions = ref<{ fieldName: string; operator: string; value: string }[]>([]);

const onTreeSelect = (selectedKeys: string[]) => {
  const selectedKey = selectedKeys[0];
  const fieldName = getFieldName(selectedKey);
  if (fieldName) {
    queryConditions.value.push({
      fieldName,
      operator: operators[0],
      value: '',
    });
  }
};

const getFieldName = (key: string): string | null => {
  const findField = (data: TreeDataItem[]): string | null => {
    for (const item of data) {
      if (item.key === key) {
        return item.title;
      }
      if (item.children) {
        const result = findField(item.children);
        if (result) {
          return result;
        }
      }
    }
    return null;
  };
  return findField(treeData);
};

const removeCondition = (index: number) => {
  queryConditions.value.splice(index, 1);
};

const handleOk = () => {
  emits('ok', queryConditions.value);
};

const handleCancel = () => {
  emits('cancel');
};

onMounted(() => {
  console.log('Modal mounted, visible:', visible);
  console.log('Tree data:', treeData);
  console.log('Query conditions:', queryConditions.value);
});
</script>

<style scoped>
.query-modal-content {
  display: flex;
  height: 300px;
}

.left-tree {
  width: 30%;
  border-right: 1px solid #ccc;
  padding-right: 16px;
}

.right-conditions {
  width: 70%;
  padding-left: 16px;
}

.condition-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.condition-item span {
  margin-right: 8px;
  min-width: 80px;
}

.condition-item a-button {
  margin-left: 8px;
}
</style>